<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /**使用固定定位，让广告条紧贴html顶部*/
            position: fixed;
            top: 0;
            /**设置宽度为视口(viewport width)宽度的100%*/
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;

        }
        .left{
            background-color: #FFF799;
        }
        .right{
            background-color: #F35336;
        }
        .main{
            margin-top: ;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci at, culpa ea iusto quibusdam ratione totam?
        Ab culpa enim error est ipsam neque nihil pariatur repellendus, sapiente voluptates. Hic, mollitia?
    </div>
    <div>A accusantium, animi culpa cumque ea hic sequi? Adipisci asperiores explicabo sapiente similique vero
        voluptatum. Eveniet expedita quisquam similique! Aliquam, beatae consequuntur distinctio hic laborum odio porro
        quisquam sunt voluptatem.
    </div>
    <div>Alias commodi et minima nam vero voluptatem. Exercitationem labore, rerum! Corporis dignissimos, doloribus eius
        sed unde vel veritatis. Consequuntur corporis, dolore doloremque incidunt laboriosam laborum modi nam officiis
        quos voluptates.
    </div>
    <div>At beatae cupiditate distinctio earum et, impedit libero necessitatibus nihil pariatur quaerat quidem quis quod
        similique ullam voluptas. Accusamus deleniti doloribus eius, ex ipsum labore minima ratione repellat repellendus
        voluptatum.
    </div>
    <div>Ab aliquid architecto asperiores assumenda culpa doloremque eos eum, hic necessitatibus, nobis officiis quas
        quibusdam quidem sit voluptas. Aliquam debitis dicta minima molestiae mollitia, officiis perspiciatis quaerat?
        Dignissimos, ipsum provident.
    </div>
    <div>Architecto deserunt eligendi enim expedita facilis ipsam neque obcaecati quibusdam reiciendis, sapiente. Amet
        animi assumenda commodi, deleniti dolor, dolorum esse ex ipsa laborum laudantium, maiores minima odio placeat
        similique voluptatum!
    </div>
    <div>Aperiam ea expedita nulla officiis saepe veniam! Commodi consequuntur deleniti dicta dolore ducimus et eveniet
        expedita fuga harum illum, ipsa iste minus nisi, obcaecati officiis possimus repellendus tempora veniam
        voluptatem!
    </div>
    <div>Adipisci autem corporis ex fugiat itaque, minus non quibusdam recusandae sequi vero! Animi aut ducimus facilis
        in laboriosam maiores minima molestiae nobis, quas rem sunt suscipit tempore vel? Consectetur, voluptatem?
    </div>
    <div>At blanditiis corporis culpa dolorum ducimus, ea eos facere facilis hic incidunt ipsam iure iusto molestiae
        nemo quae quidem quos rem, reprehenderit sint totam. Esse nihil perferendis quibusdam rerum sit.
    </div>
    <div>Aut dolores earum error est, incidunt maiores nam natus nihil recusandae ullam? Aliquam autem distinctio
        exercitationem explicabo, incidunt ipsa ipsam nihil odio perferendis, quasi quia quis quo sequi sunt ullam!
    </div>
    <div>Atque consectetur consequatur, cumque, dicta enim facere facilis impedit ipsam iure minima nihil nisi officia
        qui quia quisquam ratione, suscipit tenetur veniam! Beatae earum, fuga nam neque quaerat qui sequi.
    </div>
    <div>Animi aperiam commodi dolore doloribus ducimus eaque expedita impedit ipsum laboriosam magni molestiae natus,
        nesciunt non quidem quisquam saepe sapiente suscipit tempora, voluptatibus voluptatum? Eius eveniet perspiciatis
        possimus suscipit veritatis?
    </div>
    <div>Ab accusamus alias assumenda aut beatae consectetur culpa deleniti dicta dignissimos dolore dolorum, error et
        facere facilis fugit illum iure molestias, obcaecati officiis quaerat quidem quisquam rem suscipit unde
        voluptate.
    </div>
    <div>Commodi ducimus magni, maiores recusandae suscipit voluptatum! Animi blanditiis enim ex, magnam officiis
        pariatur quidem quisquam sint suscipit. Accusantium blanditiis dolorem eius est optio porro quaerat repellendus
        repudiandae, temporibus totam.
    </div>
    <div>Eius magnam non perferendis quod sint voluptatum. Aperiam at enim et explicabo facere harum id itaque placeat
        quos tenetur! Accusantium consequatur nisi repellat? Deleniti, eligendi hic ipsum officiis quod vitae?
    </div>
    <div>Aliquam consequuntur cumque deserunt dolore explicabo fuga ipsam quos rem velit? A accusantium adipisci aperiam
        dolor enim hic, inventore iste, nesciunt nihil non optio perferendis porro praesentium sed veritatis voluptate!
    </div>
    <div>Aliquid architecto error, in modi nisi repellendus. Alias, amet atque blanditiis cupiditate dolorem enim error
        eveniet expedita explicabo facilis necessitatibus non nostrum odio quasi quidem quisquam sequi suscipit ut
        voluptas.
    </div>
    <div>Alias dolorum est ex in laudantium maiores molestias, mollitia nisi odio quasi sequi sit! Accusamus alias
        asperiores cupiditate doloremque eos, laborum modi mollitia nesciunt quos reprehenderit rerum, ut velit vero?
    </div>
    <div>Ad asperiores blanditiis consequatur cum dignissimos dolore ducimus eius expedita facere illum incidunt, ipsum
        laboriosam maxime mollitia neque nesciunt nobis nostrum obcaecati officiis optio possimus, quam repellat
        reprehenderit sit totam!
    </div>
    <div>Adipisci architecto consectetur debitis dicta enim in libero molestiae, nemo nisi nostrum odio perspiciatis
        quam repudiandae similique tempore, temporibus tenetur unde voluptate. Consequatur earum ipsum nulla possimus
        soluta temporibus voluptatibus!
    </div>
    <div>Alias architecto assumenda cumque eaque, et eum facere, impedit iure maxime modi, molestias nemo nostrum omnis
        perspiciatis quidem tenetur totam ullam ut vero voluptatem! Ab delectus dignissimos quidem quis voluptatem!
    </div>
    <div>Culpa eligendi fugit, hic id magni molestias obcaecati pariatur perspiciatis recusandae voluptatibus.
        Architecto blanditiis cumque delectus enim ex expedita iure necessitatibus officia rerum voluptatem! Perferendis
        porro quis rem temporibus voluptas!
    </div>
    <div>Aperiam atque commodi, dolore doloribus facilis iure laborum nobis omnis tenetur. Aperiam, assumenda commodi,
        cum deserunt ducimus expedita harum laborum maiores minus nihil nobis quas, sed soluta tenetur vel vitae.
    </div>
    <div>Ab accusantium ad blanditiis consequuntur corporis deleniti dolorem eligendi error est et eveniet
        exercitationem fuga fugit harum impedit incidunt ipsa iste iusto molestiae nesciunt, nostrum obcaecati
        perferendis, quod repellat sequi.
    </div>
    <div>Asperiores commodi consequatur cupiditate debitis dolor dolore, doloremque dolores eveniet expedita laborum
        libero magni minima mollitia nisi, officiis quaerat quia reiciendis sunt temporibus voluptatibus. At eveniet
        iusto labore omnis praesentium.
    </div>
    <div>Adipisci aliquam aut consequuntur debitis deserunt doloremque doloribus enim esse, et expedita fuga id ipsam
        laborum modi molestias natus neque nihil perferendis quos rem repudiandae soluta sunt tempora veniam
        voluptatibus!
    </div>
    <div>At dolores ducimus eligendi, eos est et, ex excepturi fugit illum in inventore iure, laborum molestiae neque
        omnis pariatur quia quibusdam rem repudiandae saepe similique tempore tenetur totam voluptas voluptatibus?
    </div>
    <div>Ad distinctio ea laborum numquam placeat quo saepe veniam vitae! Eligendi inventore nostrum perferendis
        quaerat! Accusamus animi cumque, dicta dolores iusto necessitatibus perferendis quas quia, repellendus
        similique, sit suscipit voluptates.
    </div>
    <div>Animi consequuntur dolores impedit minus nulla odio soluta! Aperiam deserunt saepe tempore! Aspernatur beatae
        doloremque doloribus eaque, enim ex minima officiis optio provident quo recusandae suscipit ullam velit vitae,
        voluptatem.
    </div>
    <div>Alias distinctio dolores laborum quas sapiente! Ad aspernatur ducimus, ea harum inventore ipsa ipsam libero
        maiores, nisi numquam officia, quos ratione recusandae repellendus rerum. A doloremque pariatur recusandae ullam
        vel.
    </div>
    <div>A debitis eius molestiae officiis. Assumenda corporis dignissimos dolore earum est ex explicabo harum hic
        inventore iste itaque maiores minima mollitia necessitatibus nulla, pariatur perferendis placeat possimus
        repellat sed, sint.
    </div>
    <div>Atque consequuntur deserunt dicta illo inventore libero, numquam odit omnis vitae. Aliquid consequatur deleniti
        eum, facilis hic, id ipsum iste magnam modi mollitia numquam omnis, placeat quibusdam quidem similique vel.
    </div>
    <div>Accusantium delectus dolore dolorem fugit ipsa modi omnis pariatur quam quas? Accusantium, animi culpa, cumque
        eius eos ex id iusto necessitatibus nesciunt possimus quam quidem quisquam reprehenderit tempora vitae. Quidem!
    </div>
    <div>Adipisci, laborum, velit! Assumenda aut blanditiis deleniti distinctio, dolore ea enim est incidunt iure libero
        nam nemo perferendis possimus quam recusandae reiciendis, sequi tempora vero vitae voluptate. Cupiditate, nihil,
        nisi.
    </div>
    <div>Aspernatur, beatae consectetur dicta dignissimos distinctio ducimus excepturi explicabo harum hic iusto nobis
        obcaecati odit optio perspiciatis quo rem reprehenderit similique sit tempora tempore totam ullam ut? Aut minus,
        sit?
    </div>
    <div>Accusamus ad animi aperiam aspernatur assumenda commodi deserunt, dolores eius et ex facilis fuga, illo itaque
        labore, magni maxime nam perferendis porro quas quis quos rerum tenetur veritatis vitae voluptates!
    </div>
    <div>Ab aliquid amet at consectetur dicta dolor dolore error expedita iste laboriosam libero necessitatibus
        nesciunt, nisi nulla numquam obcaecati possimus praesentium quasi quos repellat repudiandae saepe sed sunt unde
        voluptatem?
    </div>
    <div>Ab adipisci consectetur deleniti deserunt iusto labore maxime natus nobis non placeat reiciendis, veniam.
        Incidunt laboriosam nemo odit officia, quidem repudiandae. Commodi libero mollitia nihil nobis non recusandae,
        rem voluptatibus?
    </div>
    <div>Aliquam blanditiis, earum, fuga illum itaque iusto libero neque obcaecati quae qui quisquam ratione repudiandae
        tempora voluptas voluptatum! Beatae cumque doloremque ducimus exercitationem illum ipsa sequi soluta sunt. Hic,
        officiis.
    </div>
    <div>Corporis dolor, dolores, ducimus excepturi facere ipsam modi neque quae qui quos sapiente, sequi totam vero.
        Aliquid aperiam dolor inventore itaque iusto perferendis, porro quae quam sapiente sint vero voluptate.
    </div>
    <div>Ab at deserunt, dolore est excepturi, facilis libero maxime nesciunt nostrum odit repellendus similique vitae.
        Ab, cupiditate dolores error eveniet excepturi impedit in ipsam ipsum nemo neque perferendis possimus totam.
    </div>
    <div>A ab ad illum iure iusto labore, officia quibusdam quisquam repudiandae sapiente totam ut, veniam! Accusantium,
        debitis delectus eligendi eum ipsum, libero necessitatibus omnis qui quisquam rerum sed vel, voluptatum.
    </div>
    <div>Autem commodi quia quibusdam totam ut voluptas. A accusantium, ad aperiam, asperiores consequuntur dicta ipsum
        minus numquam optio pariatur quas quia reprehenderit saepe. At exercitationem expedita, harum id sit tempore!
    </div>
    <div>Ab aliquam aperiam architecto, beatae dolores eos fuga illum ipsa laudantium magnam mollitia nam, nostrum optio
        quam quod ratione saepe sapiente sed sequi tenetur ullam vero voluptate. Nihil, veniam, voluptatum.
    </div>
    <div>Aliquam, commodi cum in itaque perspiciatis placeat porro voluptatibus. Delectus et ipsa quae recusandae
        similique? Accusantium animi aspernatur commodi eius facilis iste iusto praesentium qui repellat tempore vitae
        voluptate, voluptatum?
    </div>
    <div>Ab accusantium alias aliquid animi atque eius eos exercitationem fugiat id iure maiores nesciunt non odit,
        officiis omnis pariatur perferendis possimus quasi, quia quibusdam quisquam rem suscipit ut. Assumenda, qui?
    </div>
    <div>A accusamus amet autem blanditiis consequatur dicta dolorum eaque eius, eos expedita fugit hic impedit ipsa
        ipsam maiores molestias natus necessitatibus nemo numquam odio odit, pariatur quasi rem voluptates voluptatibus.
    </div>
    <div>Alias, blanditiis consectetur cum est ex facilis hic illo impedit perferendis recusandae reiciendis sed vero
        voluptas! A amet culpa deleniti ducimus eaque impedit, maxime necessitatibus, officiis quasi, reprehenderit
        sequi voluptate!
    </div>
    <div>Aspernatur error ipsum itaque. Alias aliquid deleniti distinctio eos impedit iste labore mollitia reiciendis!
        Alias animi consequatur id libero nihil, nulla quos. Culpa facere hic modi optio quaerat, rem reprehenderit?
    </div>
    <div>Aliquid atque, culpa ducimus eos eum hic totam! Eveniet, quaerat, tempore! Accusantium adipisci atque autem
        debitis, doloremque est ex molestiae, nam obcaecati praesentium quo repellendus reprehenderit rerum sapiente
        veritatis, voluptatibus!
    </div>
    <div>A accusamus ad aliquam architecto asperiores culpa dignissimos dolor dolores exercitationem facere facilis
        iusto laborum maxime minus molestiae nam possimus quam quasi quod quos repellendus ut velit veniam, vero
        voluptas.
    </div>
    <div>Atque consectetur culpa doloribus, ducimus earum esse expedita impedit incidunt iure molestiae necessitatibus
        nemo, nobis nostrum, possimus quasi quis repellat repudiandae sapiente sint veritatis. Cupiditate expedita
        maiores perferendis similique voluptatum!
    </div>
    <div>Facere illum impedit molestiae obcaecati officiis possimus provident quam quibusdam rerum voluptates?
        Aspernatur corporis cumque distinctio et facilis libero magni neque quis ratione unde! Deleniti eum impedit
        sapiente tempore veritatis.
    </div>
    <div>Nihil, praesentium quidem. Animi aperiam autem error harum modi nemo pariatur praesentium rerum veniam?
        Accusantium amet deserunt error esse est, ipsum iure molestiae nam omnis placeat praesentium provident quasi
        repellendus?
    </div>
    <div>Aut consectetur facere officiis provident suscipit. Blanditiis commodi culpa deserunt ea eum, ex exercitationem
        hic in incidunt magnam magni optio placeat recusandae vel voluptatibus! Deserunt, nihil nostrum. Dignissimos,
        officiis, saepe?
    </div>
    <div>A accusantium animi, blanditiis commodi cumque dolores ea eligendi esse harum id illo ipsam modi molestiae
        necessitatibus nobis numquam officia perspiciatis repellat rerum sapiente tempora vel voluptate voluptates
        voluptatibus voluptatum.
    </div>
    <div>Aliquid corporis delectus, deleniti modi molestiae nemo quasi. Amet cumque debitis deserunt doloribus eaque
        eius, natus rem! Aliquid, amet aut deserunt dolor doloremque dolores magnam quae quod sapiente ut voluptates.
    </div>
    <div>Eius est eum excepturi maxime odio provident qui quibusdam rem similique, vel! A aliquid, animi asperiores
        autem cupiditate facere id in incidunt ipsa, natus omnis placeat, reprehenderit tempora temporibus veniam?
    </div>
    <div>Accusantium beatae consectetur consequatur delectus dolorem doloribus dolorum eligendi error fuga, id inventore
        ipsa ipsam ipsum iure maiores minus nam nulla, numquam placeat reiciendis rerum saepe sapiente sint sit
        voluptatem.
    </div>
    <div>Adipisci, autem consectetur dolore excepturi explicabo facilis nihil non nulla quia quos sed, soluta tempora!
        Aliquid assumenda distinctio dolorem ea earum ex illo, mollitia, provident qui recusandae sapiente veniam
        voluptate!
    </div>
</div>
</body>
</html>